<template>
  <view class="head-title">
    <view
      class="title"
      :style="[{ color: props.color }, { 'font-size': props.fontSize },{'font-weight':props.fontWeight}]"
    >
      <text
        class="icon"
        :style="[{'border-radius':props.circle?'50rpx':0},{'background-color':props.iconColor}]"
      ></text>
      <text>{{ props.title }}</text>
    </view>
    <slot></slot>
  </view>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  color: {
    type: String,
    default: "#333",
  },
  fontSize: {
    type: String,
    default: "30rpx",
  },
  fontWeight: {
    type: String,
    default: "normal",
  },
  // 是否圆角
  circle: {
    type: Boolean,
    default: false,
  },
  // 标头颜色
  iconColor: {
    type: String,
    default: "#F34B47",
  },
});
</script>

<style lang="scss" scoped>
.head-title {
  display: flex;
  padding: 20rpx 0;
  width: 100%;
  justify-content: space-between;
  font-size: 20rpx;
  .title {
    display: flex;
    .icon {
      width: 6rpx;
      height: 100%;
      background-color: #F34B47;
      margin-right: 15rpx;
    }
  }
}
</style>
